<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消息中心</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">

    <!-- <link rel="shortcut icon" href="favicon.ico">  -->
    <link href="../Hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="../Hplus/css/font-awesome.css" rel="stylesheet">

    <link href="../Hplus/css/animate.css" rel="stylesheet">
    <link href="../Hplus/css/style.css" rel="stylesheet">

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <style>
        /* 搜索框中样式 */
        .form-control-feedback {
            color: #484848;
            line-height: 46px;
        }

        .row img {
            width: 25px;
            height: 25px;
        }

        /* 导航宽度 */
        .navbar {
            max-height: 80px;
        }

        .navbar-nav>li>a {
            padding-top: 18px;
            height: 60px;
            /* font-size: 18px; */
            /* color:white; */
            color: #484848;
        }

        .navbar-brand {
            padding-top: 8px;
            /* font-size: 18px; */
            height: 60px;
        }

        .navbar-default .navbar-nav>li>a {
            color: #484848;
        }

        .navbar-default .navbar-nav>li>a:hover {
            color: #000;
        }


        /* 下划线动画 */
        .navbar-right li {
            display: inline-block;
            padding: 0 0.8em;
        }

        .navbar-right a {
            position: relative;
            text-decoration: none;
            color: #484848;
            display: block;
            padding: 1.2em 0.8em;
        }

        .nav-underline:before {
            content: "";
            position: absolute;
            bottom: 0;
            width: 0;
            border-bottom: 2px solid #484848;
        }

        .nav-underline:hover:before {
            width: 80%;
        }

        .nav-underline:before {
            -webkit-transition: width 0.5s ease-in-out;
            -moz-transition: width 0.5s ease-in-out;
            -ms-transition: width 0.5s ease-in-out;
            -o-transition: width 0.5s ease-in-out;
            transition: width 0.5s ease-in-out;
        }

        .mynav-underline-active,
        .mynav-underline-active:hover {
            border-bottom: 2px solid #484848;
            text-align: center;
        }

        .navbar-right a {
            /* font-family:'Times New Roman', Times, serif; */
            /* font-weight: bold; */
            font-family: 宋体, sans-serif;
            letter-spacing: 1pt;
            /*字间距离*/
            /* border-bottom : 1px solid #4e5358; 下框线 */
            line-height: 20px;

        }
    </style>

</head>
<body>
<!--导航-->
<div class="container-fluid">
    <!-- 使页面铺满整个屏幕 -->
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-brand" style="margin-left:10px">
                    <img src="img" href="#"></a>
                </div>
                <div class="navbar-brand" style="margin-left:10px">
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                            <div class="modal-md">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                <input id="search" type="text" class="form-control input-lg" placeholder="搜'柴犬'试试">
                            </div>
                        </div>
                    </form>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li class="pure-menu-selected"><a href="../views/index.html" class="mynav-underline-active"><b>首页</b></a></li>
                    <li><a href="../views/forum/forum.html" class="nav-underline"><b>论坛</b></a></li>
                    <li><a href="../views/PetDynamics/dynamic.html" class="nav-underline"><b>宠物动态</b></a></li>
                    <li><a href="../views/trading/homepage.html" class="nav-underline"><b>二手市场</b></a></li>
                    <li><a href="../views/fun-function.html" class="nav-underline"><b>趣味专区</b></a></li>
                    <li><a href="../views/message-centre.html" class="nav-underline"><b>消息中心</b></a></li>
                    <li><a href="../views/PetPerson/person.html" class="nav-underline"><b>我的</b></a></li>

                </ul>
            </div>
        </nav>

    </div>
</div>

<div class="context" style="margin-top: 100px;margin-left: 20%;margin-right: 20%">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                 收到的评论
            </a>
        </li>
        <li><a href="#ios" data-toggle="tab">收到的回复</a></li>
                <li><a href="#jmeter" tabindex="-1" data-toggle="tab">收到的赞</a></li>
    </ul>
    
    <div id="myTabContent" class="tab-content">
        <!-- 收到的评论内容 -->
        <div class="tab-pane fade in active" id="home">
            <div class="social-feed-box">

                <div class="pull-right social-action dropdown">
                    <button data-toggle="dropdown" class="dropdown-toggle btn-white">
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu m-t-xs">
                        <li><a href="#">删除</a></li>
                        <li><a href="#">举报</a></li>
                    </ul>
                </div>
                <div class="social-avatar">
                    <a href="" class="pull-left">
                        <img alt="image" src="../imgs/login-register/23.jpg">
                    </a>
                    <div class="media-body">
                        <a href="#">
                                    别堕落你没资格
                                </a>
                        <small class="text-muted">8月18日 16:05 来自 论坛某某区</small>
                    </div>
                </div>
                <div class="social-body">
                    <p>
                        哈哈哈哈哈
                    </p>
                </div>
                <div class="social-footer">
                    <div class="social-comment">
                   
                        <div class="media-body">
                           
                                    评论了我的帖子:
                            <br/>
                            <a href="#">
                                @一只学霸:哈哈哈哈哈哈哈//@风吹铃铛响叮叮:窒息了。。//
                                @课代表东东酱:哈哈哈哈哈哈笑死//
                                @朱灵珑:讲真的这个名字看着就离奇哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                用刷锅水提鲜？爆笑吐槽剧情离奇的厨师玛丽苏《亲爱的味道》......
                            </a>
                            
                        </div>
                    </div>

                </div> 

                <form class="reply1">
                <div class="social-comment" style="margin-top: 15px">
                   
                        <div class="media-body">
                            <textarea class="form-control" placeholder="填写回复..."></textarea>
                        </div>
                        
                    </div>
                            <div class="btn-group">
                        <button type="submit" class="btn btn-white btn-xs">
                            <i class="fa fa-comments"></i> 发送
                        </button>
                        
                        <button type="submit" class="btn btn-white btn-xs" style="margin-left:30px">
                            <i class="fa fa-thumbs-up"></i> 赞
                        </button>
                        
                    </div>
                </form>
            </div>

            <div class="social-feed-box">

                    <div class="pull-right social-action dropdown">
                        <button data-toggle="dropdown" class="dropdown-toggle btn-white">
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu m-t-xs">
                            <li><a href="#">删除</a></li>
                            <li><a href="#">举报</a></li>
                        </ul>
                    </div>
                    <div class="social-avatar">
                        <a href="" class="pull-left">
                            <img alt="image" src="../imgs/login-register/23.jpg">
                        </a>
                        <div class="media-body">
                            <a href="#">
                                        别堕落你没资格
                                    </a>
                            <small class="text-muted">8月18日 16:05 来自 论坛某某区</small>
                        </div>
                    </div>
                    <div class="social-body">
                        <p>
                            hhhhhhhh
                        </p>
                    </div>
                    <div class="social-footer">
                        <div class="social-comment">
                       
                            <div class="media-body">
                               
                                        评论了我的帖子:
                                <br/>
                                <a href="#">
                                    @一只学霸:哈哈哈哈哈哈哈//@风吹铃铛响叮叮:窒息了。。//
                                    @课代表东东酱:哈哈哈哈哈哈笑死//
                                    @朱灵珑:讲真的这个名字看着就离奇哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                    用刷锅水提鲜？爆笑吐槽剧情离奇的厨师玛丽苏《亲爱的味道》......
                                </a>
                                
                            </div>
                        </div>
    
                    </div> 
    
                    <form class="reply1">
                    <div class="social-comment" style="margin-top: 15px">
                       
                            <div class="media-body">
                                <textarea class="form-control" placeholder="填写回复..."></textarea>
                            </div>
                            
                        </div>
                                <div class="btn-group">
                            <button type="submit" class="btn btn-white btn-xs">
                                <i class="fa fa-comments"></i> 发送
                            </button>
                            
                            <button type="submit" class="btn btn-white btn-xs" style="margin-left:30px">
                                <i class="fa fa-thumbs-up"></i> 赞
                            </button>
                            
                        </div>
                    </form>
                </div>

        </div>
        <!-- 收到的回复内容 -->
        <div class="tab-pane fade" id="ios">
                <div class="social-feed-box">

                        <div class="pull-right social-action dropdown">
                            <button data-toggle="dropdown" class="dropdown-toggle btn-white">
                                <i class="fa fa-angle-down"></i>
                            </button>
                            <ul class="dropdown-menu m-t-xs">
                                <li><a href="#">删除</a></li>
                                <li><a href="#">举报</a></li>
                            </ul>
                        </div>
                        <div class="social-avatar">
                            <a href="" class="pull-left">
                                <img alt="image" src="../imgs/login-register/23.jpg">
                            </a>
                            <div class="media-body">
                                <a href="#">
                                            别堕落你没资格
                                        </a>
                                <small class="text-muted">8月18日 16:05 来自 论坛某某区</small>
                            </div>
                        </div>
                        <div class="social-body">
                            <p>
                                哈哈哈哈哈
                            </p>
                        </div>
                        <div class="social-footer">
                            <div class="social-comment">
                           
                                <div class="media-body">
                                   
                                            回复了我的评论:
                                    <br/>
                                    哈哈,有趣有趣//
                                    <a href="#">
                                        @一只学霸:哈哈哈哈哈哈哈//@风吹铃铛响叮叮:窒息了。。//
                                        @课代表东东酱:哈哈哈哈哈哈笑死//
                                        @朱灵珑:讲真的这个名字看着就离奇哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                        用刷锅水提鲜？爆笑吐槽剧情离奇的厨师玛丽苏《亲爱的味道》......
                                    </a>
                                </div>
                            </div>
        
                        </div> 
        
                        <form class="reply1">
                        <div class="social-comment" style="margin-top: 15px">
                           
                                <div class="media-body">
                                    <textarea class="form-control" placeholder="填写回复..."></textarea>
                                </div>
                                
                            </div>
                                    <div class="btn-group">
                                <button type="submit" class="btn btn-white btn-xs">
                                    <i class="fa fa-comments"></i> 发送
                                </button>
                                
                                <button type="submit" class="btn btn-white btn-xs" style="margin-left:30px">
                                    <i class="fa fa-thumbs-up"></i> 赞
                                </button>
                                
                            </div>
                        </form>
                    </div>
        </div>
        <!-- 收到的赞内容 -->
        <div class="tab-pane fade" id="jmeter">
                <div class="social-feed-box">

                        <div class="pull-right social-action dropdown">
                            <button data-toggle="dropdown" class="dropdown-toggle btn-white">
                                <i class="fa fa-angle-down"></i>
                            </button>
                            <ul class="dropdown-menu m-t-xs">
                                <li><a href="#">删除</a></li>
                                <li><a href="#">举报</a></li>
                            </ul>
                        </div>
                        <div class="social-avatar">
                            <a href="" class="pull-left">
                                <img alt="image" src="../imgs/login-register/23.jpg">
                            </a>
                            <div class="media-body">
                                <a href="#">
                                            别堕落你没资格
                                        </a>
                                <small class="text-muted">8月18日 16:05 来自 论坛某某区</small>
                            </div>
                        </div>
                        <div class="social-body">
                            <p>
                                对你的帖子发表了态度   <i class="fa fa-thumbs-up"></i> 
                            </p>
                        </div>
                        <div class="social-footer">
                            <div class="social-comment">
                           
                                <div class="media-body">
                                   
                                            <a href="#">@我的用户名</a>
                                            <small class="text-muted">8月18日 12:05 来自 论坛某某区</small>
                                            发布的帖子:
                                    <br/>
                                    <a href="#">
                                        用刷锅水提鲜？爆笑吐槽剧情离奇的厨师玛丽苏《亲爱的味道》................
                                    </a>
                                    
                                </div>
                            </div>
        
                        </div> 
        
                        <form class="reply1">
                        <div class="social-comment" style="margin-top: 15px">
                           
                                <div class="media-body">
                                    <textarea class="form-control" placeholder="填写回复..."></textarea>
                                </div>
                                
                            </div>
                                    <div class="btn-group">
                                <button type="submit" class="btn btn-white btn-xs">
                                    <i class="fa fa-comments"></i> 发送
                                </button>    
                            </div>
                        </form>
                    </div>

                    <div class="social-feed-box">

                            <div class="pull-right social-action dropdown">
                                <button data-toggle="dropdown" class="dropdown-toggle btn-white">
                                    <i class="fa fa-angle-down"></i>
                                </button>
                                <ul class="dropdown-menu m-t-xs">
                                    <li><a href="#">删除</a></li>
                                    <li><a href="#">举报</a></li>
                                </ul>
                            </div>
                            <div class="social-avatar">
                                <a href="" class="pull-left">
                                    <img alt="image" src="../imgs/login-register/23.jpg">
                                </a>
                                <div class="media-body">
                                    <a href="#">
                                                别堕落你没资格
                                            </a>
                                    <small class="text-muted">8月18日 16:05 来自 论坛某某区</small>
                                </div>
                            </div>
                            <div class="social-body">
                                <p>
                                        对你的评论发表了态度   <i class="fa fa-thumbs-up"></i>
                                </p>
                            </div>
                            <div class="social-footer">
                                <div class="social-comment">
                               
                                    <div class="media-body">  
                                        哈哈,有趣有趣//
                                        <a href="#">
                                            @一只学霸:哈哈哈哈哈哈哈//@风吹铃铛响叮叮:窒息了。。//
                                            @课代表东东酱:哈哈哈哈哈哈笑死//
                                            @朱灵珑:讲真的这个名字看着就离奇哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                            用刷锅水提鲜？爆笑吐槽剧情离奇的厨师玛丽苏《亲爱的味道》......
                                        </a>
                                    </div>
                                </div>
            
                            </div> 
            
                            <form class="reply1">
                            <div class="social-comment" style="margin-top: 15px">     
                                    <div class="media-body">
                                        <textarea class="form-control" placeholder="填写回复..."></textarea>
                                    </div> 
                                </div>
                                        <div class="btn-group">
                                    <button type="submit" class="btn btn-white btn-xs">
                                        <i class="fa fa-comments"></i> 发送
                                    </button>   
                                </div>
                            </form>
                        </div>
                    </div>
            </div>
     </div>
</div>
<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<!--本页面不能加这个,会有冲突 <script src="../plugins/bootstrap/js/bootstrap.js"></script> -->

<script>
    $(document).ready(function () {
        $("#search").focus(function () {
            $(this).css("padding-right", "200.5px")
        });
        $("#search").blur(function () {
            $(this).css("padding-right", "42.5px")
        });
    });

</script>
    </body>
</html>